<html>
<head>
  <title>EdgeBoard</title>
  <style>
    body {
      text-align: center;
    }

    h1 {
      margin-top: 50px;
    }

    img {
      margin-top: 20px;
    }

    button {
      margin-top: 20px;
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
  <script>
    function saveImage() {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/save_image", true);

      xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
          console.log("Image saved successfully!");
        } else {
          console.log("Failed to save image.");
        }
      };

      xhr.send();
    }
  </script>
</head>
<body>
  <h1>EdgeBoard</h1>
  <img src="{{ url_for('video_feed') }}">
    <button onclick="saveImage()">保存图像</button>

</body>
</html>
